<template>
  <div>
    <div class="detail-pad-l font-16">
      <el-form ref="form" :model="taskInfo" label-width="100px" class="layer-relation">
        <el-form-item label="任务名称:">
          {{ taskInfo.taskName }}
        </el-form-item>
        <el-form-item label="结算类型:">
          <template v-if="taskInfo.taskType == 2">
            {{ taskTypes[taskInfo.taskType] }}
          </template>
          <template v-else>
            <span>{{ remunerationTypes[taskInfo.remunerationType] }}</span>
            <span v-if="taskInfo.remunerationTypeModel === 12">| 推广类型</span>
            <span v-else>| 技能类型</span>
          </template>
        </el-form-item>
        <el-form-item label="验收内容:">
          {{ taskInfo.acceptanceContents }}
        </el-form-item>
        <el-form-item label="微客:">
          <div class="flex v-align-c" align="center">
            <label><img :src="avatar" class="user-avatar" v-if="avatar"></label>
            <div class="font-14 pad-l-10">
              <div>昵称：{{nickname}}</div>
              <div>姓名：{{realName}}</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="状态:">
          <span v-if="taskInfo.paymentStatus === 1">待验收</span>
          <span v-if="taskInfo.paymentStatus === 2">已验收</span>
          <span v-if="taskInfo.paymentStatus === 4">验收未通过</span>
        </el-form-item>
        <el-form-item label="提交内容:" v-if="taskCommissionRuleList.length !== 0">
          <el-table :data="taskCommissionRuleList" :show-header="false" style="width: 300px" class="level-table mar-t-30">
            <el-table-column prop="ruleName" width="150" align="center"></el-table-column>
            <el-table-column prop="content" width="150" align="center">
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="附件:">
          <el-table :data="taskFileList" :show-header="false" v-if="taskFileList && taskFileList.length !== 0" style="width: 50%; background-color: #1e6abc" class="level-table mar-t-30">
            <el-table-column label="文件名称" prop="fileName" min-width="120" align="center"></el-table-column>
            <el-table-column label="上传时间" prop="createTime" width="120" align="center">
            </el-table-column>
            <el-table-column label="交付说明" prop="remark" min-width="200" align="center">
            </el-table-column>
            <el-table-column width="250" label="操作" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" @click="downFile(scope.row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="float: left">
        <el-button @click="returnToThePreviousLevel">返回上一级</el-button>
        <template v-if="taskInfo.paymentStatus === 1">
          <el-button type="success" @click="checkAcceptance('2')">验收通过</el-button>
          <el-button type="danger" @click="checkAcceptance('4')">不通过</el-button>
        </template>
      </div>
    </div>
    <!-- 计件 弹窗 -->
    <el-dialog :title="financeTitle" :visible.sync="financeVisible" :close-on-press-escape="true" width="650px">
      <div style="text-align: center; background-color: lavender; height: 30px; line-height: 30px">
        <span style="size: 20px">验收件数: <span>{{ taskInfo.budgetAmount/taskInfo.budgetNum }}</span>元/件  | 共<span>{{taskInfo.budgetNum + taskInfo.budgetNumAppend}}</span>件 | 已验收<span>{{taskInfo.completeNum}}</span>件 </span>
      </div>
      <el-form :model="taskCommissionForm" label-width="160px" :rules="rules" ref="taskCommissionForm" class="pad-t-10">
        <el-form-item label="微客完成件数:" prop="taskNum">
          <el-col :span="12" class="input-r-txt">
            <el-input v-model="taskCommissionForm.taskNum" type="number" placeholder="请输入件数"/>
            <span>件</span>
          </el-col>
        </el-form-item>
        <el-form-item label="分配酬金:" prop="amount">
          <span class="font-red font-18" v-if="taskCommissionForm.taskNum">{{ Math.floor((taskCommissionForm.taskNum * amountDemo) * 100) / 100 }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="financeVisible = false">取消</el-button>
        <el-button type="primary" @click="adoptRecordConfirm">验收通过</el-button>
      </div>
    </el-dialog>
     <!--悬赏协同验收通过 弹窗-->
    <el-dialog :title="sureLevelTitle" :visible.sync="sureLevelVisible" :close-on-press-escape="true" width="650px">
      <el-form :model="formSureLevel" label-width="180px" :rules="rulesSureLevel" ref="formSureLevel" class="pad-t-10">
        <el-form-item label="请分配该微客等级：" prop="level">
          <el-select v-model="formSureLevel.level" placeholder="请选择" @change="sureLevelChange">
            <el-option :label="item.levelName" :value="index" :key="item.index" v-for="(item,index) in taskLevelList"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="该等级分配金额:"><span class="font-red font-18" v-if="formSureLevel.amount">{{ formSureLevel.amount }}元</span></el-form-item>
        <el-form-item label="酬金折扣:" v-if="this.taskInfo.nature === 2"><span class="font-red font-18">{{ formSureLevel.discountStr }}</span></el-form-item>
        <el-form-item label="实际分配金额:" v-if="this.taskInfo.nature === 2"><span class="font-red font-18">{{ formSureLevel.actualAmount }}</span></el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sureLevelVisible = false">取消</el-button>
        <el-button type="primary" @click="sureLevelConfirm">确认提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .svg-icon{
    margin-right: 6px;

  }
  .wechatRadius{
    font-size: 26px;
  }
  .alipay{
    font-size: 60px;
    height: 30px;
  }
  .radio-txt{
    vertical-align: top;
    display: inline-block;
    padding-top: 6px;
  }
  .radio-border{
    border:#ccc 1px solid;
    vertical-align: middle;
    display: inline-block;
    padding: 5px 10px;
    width: 150px;
    height: 40px;
  }
  .span-member {
    font-size: 15px;
  }
  .span-member-1 {
    margin-left: 10px;
    margin-right: 10px;
  }
  .span-member-2 {
    margin-right: 10px;
  }
  .finance-add-btn{
    margin-top: -10px;
  }
  .user-avatar{
    width: 46px;
    height: 46px;
    display: block;
    border-radius: 50px;
  }
</style>

<script>
  import { pagingTaskFile, getTaskCommissionMember, checkAcceptance, doPieceworkPass, getTaskDetailDTO, listTaskCommissionRule } from '@/api/project/taskCommission'
  import { getListTaskLevel } from '@/api/project/taskInfo'
  import { downloadFile } from '@/api/common/common'
  // 支付表
  export default {
    data() {
      return {
        taskCommissionId: '',
        priceAmount: '',
        avatar: '',
        nickname: '',
        realName: '',
        taskInfo: {},
        taskFileList: [],
        taskCommissionRuleList: [],
        settleTypes: [],
        payCycles: [],
        remunerationTypes: [],
        taskTypes: [],
        taskLevelList: [],
        total: null,
        financeVisible: false,
        financeTitle: null,
        sureLevelVisible: false,
        sureLevelTitle: null,
        amountDemo: 1,
        multipleSelection: [],
        taskCommissionForm: {
          taskNum: '',
          amount: '1'
        },
        rulesSureLevel: {
          level: [
            { required: true, message: '请分配该微客等级！', trigger: 'blur' }
          ]
        },
        formSureLevel: {
          level: '请选择',
          amount: null,
          discount: null,
          discountStr: null,
          actualAmount: null,
          taskCommissionId: '',
          paymentStatus: '',
          levelId: '',
          levelName: ''
        },
        taskFileListQuery: {
          currentPage: 1,
          size: 10,
          memberId: '',
          taskCommissionId: this.taskCommissionId
        },
        rules: {
          taskNum: [
            { required: true, message: '件数', trigger: 'blur' }
          ]
        }
      }
    },
    // 过滤器
    filters: {
    },
    // 初始化页面
    created() {
      this.queryParams = this.getCurrentPage().query
      if (this.queryParams && this.queryParams.taskCommissionId) {
        this.taskCommissionId = this.queryParams.taskCommissionId.toString()
        this.taskFileListQuery.taskCommissionId = this.queryParams.taskCommissionId.toString()
      }
      if (this.queryParams && this.queryParams.avatar) {
        this.avatar = this.queryParams.avatar.toString()
      }
      if (this.queryParams && this.queryParams.nickname) {
        this.nickname = this.queryParams.nickname.toString()
      }
      if (this.queryParams && this.queryParams.realName) {
        this.realName = this.queryParams.realName.toString()
      }
      this.initTaskCommissionMember()
    },
    methods: {
      initTaskCommissionMember() {
        getTaskCommissionMember(this.taskCommissionId).then(response => {
          if (response.isError) return
          this.taskInfo = response.data
          if (response.data.dict.remunerationType) {
            this.remunerationTypes = response.data.dict.remunerationType
          }
          if (response.data.dict.taskType) {
            this.taskTypes = response.data.dict.taskType
          }
          if (response.data.budgetNum) {
            this.priceAmount = Math.floor((response.data.budgetAmount / response.data.budgetNum) * 100) / 100
          }
        })
        this.pageTaskFiles()
        this.listTaskCommissionRule()
      },
      pageTaskFiles() {
        // 查询源文件集合
        pagingTaskFile(this.taskFileListQuery).then(response => {
          if (response.isError) return
          this.taskFileList = response.records
          this.total = response.total
        })
      },
      listTaskCommissionRule() {
        listTaskCommissionRule(this.taskCommissionId).then(response => {
          if (response.isError) return
          this.taskCommissionRuleList = response.data
        })
      },
      // 返回上一级
      returnToThePreviousLevel() {
        this.$router.push({ path: '/project/task/detail/index', query: { taskId: this.taskInfo.taskId, activeName: '3' }})
      },
      // 验收
      checkAcceptance(status) {
        if (status === '4') {
          // bu
          this.$prompt('请填写不通过理由', '', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            customClass: 'new-calss-input',
            inputType: 'textarea',
            inputPlaceholder: '请输入内容'
          }).then(({ value }) => {
            const query = {
              taskCommissionId: this.taskCommissionId,
              paymentStatus: status,
              refuseRemark: value,
              taskId: this.taskInfo.taskId
            }
            checkAcceptance(query).then(response => {
              if (response.isError) return
              this.$message({
                message: '已拒绝通过',
                type: 'success'
              })
              this.returnToThePreviousLevel()
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        } else {
          // 计件 技能类型
          if (this.taskInfo.remunerationTypeModel === 12) {
            if (status === '2') {
              this.$confirm('支付酬金: ' + this.priceAmount + '元，是否确认验收通过？', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
              }).then(() => {
                const query = {
                  taskCommissionId: this.taskCommissionId,
                  paymentStatus: status,
                  taskId: this.taskInfo.taskId
                }
                checkAcceptance(query).then(response => {
                  if (response.isError) return
                  this.$message({
                    message: '验收通过',
                    type: 'success'
                  })
                  this.returnToThePreviousLevel()
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消'
                })
              })
            }
          } else {
            if (this.taskInfo.remunerationType === 1) {
              this.adoptRecord()
            } else {
              this.handleSureLevel()
            }
          }
        }
      },
      // 计件验收通过 弹窗
      adoptRecord() {
        this.financeVisible = true
        this.financeTitle = '验收通过后，酬金将无法追回.请填写件数'
        // 查询总金额/件数=单价  剩余金额
        this.amountDemo = Math.floor((this.taskInfo.budgetAmount / this.taskInfo.budgetNum) * 100) / 100
      },
      // 计件验收通过确认
      adoptRecordConfirm() {
        if (this.taskCommissionForm.taskNum > 0) {
          doPieceworkPass(this.taskCommissionId, this.taskCommissionForm.taskNum, this.taskInfo.taskId, this.getEnterpriseId()).then(response => {
            if (response.isError) return
            this.$message({
              message: '已通过',
              type: 'success'
            })
            this.returnToThePreviousLevel()
          })
          this.financeVisible = false
        } else {
          this.$message({
            message: '请输入大于0的件数',
            type: 'success'
          })
        }
      },
      sureLevelChange(event) {
        const temp = this.taskLevelList[event]
        this.formSureLevel.levelId = temp.levelId
        this.formSureLevel.levelName = temp.levelName
        this.formSureLevel.amount = temp.levelAmount / temp.levelNum
        if (this.taskInfo.nature === 2) {
          if (this.formSureLevel.discount) {
            this.formSureLevel.actualAmount = this.formSureLevel.amount * (this.formSureLevel.discount / 100)
          } else {
            this.formSureLevel.actualAmount = this.formSureLevel.amount
          }
        }
      },
      // 非计件验收通过 弹窗
      handleSureLevel() {
        this.formSureLevel.taskCommissionId = this.taskCommissionId
        this.formSureLevel.paymentStatus = 2
        getListTaskLevel(this.taskInfo.taskId).then(response => {
          if (response.isError) return
          this.taskLevelList = response.data
        })
        if (this.taskInfo.nature === 2) {
          getTaskDetailDTO(this.taskInfo.taskId).then(response => {
            if (response.isError) return
            this.formSureLevel.discount = response.data.internalRatio
            this.formSureLevel.discountStr = response.data.internalRatio.toString().split('.')[0] + '%'
          })
        }
        this.sureLevelVisible = true
        this.sureLevelTitle = '验收通过后，酬金将无法追回，请确认后选择等级'
        // 查询等级
      },
      // 非记件验收通过 确认
      sureLevelConfirm() {
        if (this.formSureLevel.level === '请选择') {
          this.$message({
            message: '请选择等级',
            type: 'error'
          })
        } else {
          let amount = 0
          if (this.taskInfo.nature === 2) {
            amount = this.formSureLevel.actualAmount
          } else {
            amount = this.formSureLevel.amount
          }
          const query = {
            taskCommissionId: this.formSureLevel.taskCommissionId,
            paymentStatus: this.formSureLevel.paymentStatus,
            amount: amount,
            levelId: this.formSureLevel.levelId,
            levelName: this.formSureLevel.levelName,
            taskId: this.taskInfo.taskId
          }
          checkAcceptance(query).then(response => {
            if (response.isError) return
            this.sureLevelVisible = false
            this.$message({
              message: '验收通过',
              type: 'success'
            })
            this.returnToThePreviousLevel()
          })
        }
      },
      // 列表排序
      sortChange(data) {
        const { prop, order } = data
        if (prop === 'createTime') {
          if (order === 'ascending') {
            this.taskCommissionListQuery.ascs = 'createTime'
            this.taskCommissionListQuery.descs = ''
          } else {
            this.taskCommissionListQuery.ascs = ''
            this.taskCommissionListQuery.descs = 'createTime'
          }
        }
        this.pageTaskFiles()
      },
      handleSearch() {
        this.taskCommissionListQuery.currentPage = 1
        this.pageTaskFiles()
      },
      handleSizeChange(val) {
        this.taskFileListQuery.size = val
        this.pageTaskFiles()
      },
      handleCurrentChange(val) {
        this.taskFileListQuery.currentPage = val
        this.pageTaskFiles()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      // 下载源文件
      download(row) {
        this.downloadVisible = true
        this.taskCommissionId = row.taskCommissionId
        this.taskFileListQuery.taskCommissionId = row.taskCommissionId
        this.taskFileListQuery.memberId = row.memberId
        this.pageTaskFiles()
      },
      downFile(row) {
        downloadFile(row.fileUrl, {}, '附件')
      }
    },
    mounted() {
    }
  }
</script>
